<!--
 * @Author: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @Date: 2024-10-10 14:08:45
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-12 11:49:16
 * @FilePath: \ft-apply-admin\src\views\DataCenter\HRStatement\component\Category.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="pie">
    <div class="chart" ref="chartsRef"></div>
  </div>
</template>
<script setup lang='ts'>
import { computed, ref, defineProps, onMounted, watch } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { getCategoryOptions } from './data';
const chartsRef = ref<HTMLDivElement | null>(null);
const props = defineProps(['list'])
const { setOptions } = useECharts(chartsRef);

watch(() => props.list, (val) => {
  if (val.length > 0) {
    initCharts()
  }
},{ deep: true })

const initCharts = () => {
  const list = props.list
  const dimensions = ['type'];
  const keys = ['到面', '过面', '到培', '过培', '过培签约', '过培入职'];
  console.log(list,'===。list')
  const source = keys.map(key => {
    const dataEntry = { type: key };
    list.forEach(item => {
      const found = item.list.find(entry => entry.key === key);
      dataEntry[item.name] = found ? found.value : 0;
    });
    return dataEntry;
  });
  console.log(source,'source')
  list.forEach(el => {
    dimensions.push(el.name)
  })
  const option = getCategoryOptions(dimensions, source ,list)
  setOptions(option)
}
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>